<template>
    <div>
        <avue-form ref="form" v-model="obj" :option="option"
                   @reset-change="emptytChange"
                   @submit="submit">
            <template #textTwo="{}">
                <TinymceEditor v-if="initSuccess" :content.sync="obj.textTwo" @update:content="obj.textTwo = $event"/>
            </template>
            <template #textThree="{}">
                <MdEditor v-if="initSuccess" :content.sync="obj.textThree" @update:content="obj.textThree = $event"/>
            </template>

        </avue-form>
    </div>
</template>

<script>

import {uploadPath} from "@/config/env";

export default {
    data() {
        return {
            obj: {},
            initSuccess: false,
            defaultData: {
                name: null,
                age: null,
                sex: null,
                like: null,
                city: null,
                disable: null,
                headUrl: null,
                headFiles: null,
                videoFiles: null,
                files: null,
                time: null,
                timeTwo: null,
                text: null,
                textTwo: null,
                textThree: null,
                cascader: null,
                array: null,
                icon: "",
                color: null,
                map: null,

            },
        }
    },
    props: {
        uri: {},
    },
    computed: {
        option() {
            return {
                // size: "small",
                submitBtn: true,
                emptyBtn: true,
                submitText: '提交',
                emptyText: "关闭",
                column: [
                    {
                        label: '名称 ',
                        prop: 'name',
                        labelWidth: 110,
                        maxlength: 64,
                        showWordLimit: true,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请输入 名称 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '年龄 ',
                        prop: 'age',
                        type: 'number',
                        labelWidth: 110,
                        precision: 0,  //保留小数位,
                        min: 0,
                        max: 9999999999.99,
                        step: 1,
                        row: true,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请输入 年龄 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '性别 ',
                        prop: 'sex',
                        type: 'radio',
                        labelWidth: 110,
                        dicData: this.dict.get('DEFAULT'),
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 性别 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '爱好 ',
                        prop: 'like',
                        type: 'checkbox',
                        labelWidth: 110,
                        dataType: 'string', // 字符串模式
                        dicData: this.dict.get('DEFAULT'),
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 爱好 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '城市 ',
                        prop: 'city',
                        type: 'select',
                        labelWidth: 110,
                        filterable: true,
                        dicData: this.dict.get('DEFAULT'),
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 城市 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '禁用 ',
                        prop: 'disable',
                        type: 'select',
                        labelWidth: 110,
                        filterable: true,
                        dicData: this.dict.get('WHETHER'),
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 禁用 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '单图文件',
                        prop: 'headUrl',
                        dataType: 'string',
                        labelWidth: 110,
                        rules: [{
                            required: false,
                            message: "请上传 单图文件 ",
                            trigger: "blur"
                        }],
                        span: 24,
                        accept: 'image/png, image/jpeg, image/jpg, image/gif',
                        type: 'upload',
                        listType: 'picture-img',
                        action: uploadPath ,   // 上传地址 + 文件保存上传地址(详见接口描叙)
                        multiple: true,          // 文件多选
                        drag: false,              // 拖拽排序
                        limit: 1,                // 上传数量 1 个
                        //fileSize: 500,         // 上传大小 500 kb内
                        tip: '只能上传 jpg/png/gif 格式的图片',
                        loadText: '上传中...',
                        propsHttp: {
                            res: 'data'
                        },
                        uploadBefore: (file, done) => {
                            // 文件上传前处理
                            done(file)
                        },
                        uploadAfter: (res, done) => {
                            // // this.$message.success('上传成功');
                            done()
                        },
                        uploadError(error, column) {
                            // 上传失败
                            this.$message.error(error);
                        },
                        uploadExceed(limit, files, fileList, column) {
                            // 文件数量验证
                            this.$message.warning(`当前限制文件数量为 $1, 当前共 ${files.length + fileList.length} `);
                        },
                    },
                    {
                        label: '多图文件 ',
                        prop: 'headFiles',
                        dataType: 'string',
                        labelWidth: 110,
                        rules: [{
                            required: false,
                            message: "请上传 多图文件  ",
                            trigger: "blur"
                        }],
                        span: 24,
                        accept: 'image/png, image/jpeg, image/jpg, image/gif',
                        type: 'upload',
                        listType: 'picture-card',
                        action: uploadPath ,   // 上传地址 + 文件保存上传地址(详见接口描叙)
                        multiple: true,          // 文件多选
                        drag: true,              // 拖拽排序
                        limit: 10,                // 上传数量 1 个
                        //fileSize: 500,         // 上传大小 500 kb内
                        tip: '只能上传10张 jpg/png/gif 格式的图片',
                        loadText: '上传中...',
                        propsHttp: {
                            res: 'data'
                        },
                        uploadBefore: (file, done) => {
                            // 文件上传前处理
                            done(file)
                        },
                        uploadAfter: (res, done) => {
                            // this.$message.success('上传成功');
                            done()
                        },
                        uploadError(error, column) {
                            // 上传失败
                            this.$message.error(error);
                        },
                        uploadExceed(limit, files, fileList, column) {
                            // 文件数量验证
                            this.$message.warning(`当前限制文件数量为 $10, 当前共 ${files.length + fileList.length} `);
                        },
                    },
                    {
                        label: '视频文件 ',
                        prop: 'videoFiles',
                        dataType: 'string',
                        labelWidth: 110,
                        rules: [{
                            required: false,
                            message: "请上传 视频文件  ",
                            trigger: "blur"
                        }],
                        span: 24,
                        accept: 'video/mp4',
                        type: 'upload',
                        listType: 'picture-img',
                        action: uploadPath ,   // 上传地址 + 文件保存上传地址(详见接口描叙)
                        multiple: true,          // 文件多选
                        drag: false,              // 拖拽排序
                        limit: 1,                // 上传数量 1 个
                        //fileSize: 500,         // 上传大小 500 kb内
                        tip: '只能上传mp4格式的视频',
                        loadText: '上传中...',
                        propsHttp: {
                            res: 'data'
                        },
                        uploadBefore: (file, done) => {
                            // 文件上传前处理
                            done(file)
                        },
                        uploadAfter: (res, done) => {
                            // this.$message.success('上传成功');
                            done()
                        },
                        uploadError(error, column) {
                            // 上传失败
                            this.$message.error(error);
                        },
                        uploadExceed(limit, files, fileList, column) {
                            // 文件数量验证
                            this.$message.warning(`当前限制文件数量为 $1, 当前共 ${files.length + fileList.length} `);
                        },
                    },
                    {
                        label: '任意文件 ',
                        prop: 'files',
                        dataType: 'string',
                        labelWidth: 110,
                        rules: [{
                            required: false,
                            message: "请上传 任意文件  ",
                            trigger: "blur"
                        }],
                        span: 24,
                        accept: null,
                        type: 'upload',
                        listType: '',
                        action: uploadPath,   // 上传地址 + 文件保存上传地址(详见接口描叙)
                        multiple: true,          // 文件多选
                        drag: true,              // 拖拽排序
                        limit: 10,                // 上传数量 1 个
                        //fileSize: 500,         // 上传大小 500 kb内
                        tip: '',
                        loadText: '上传中...',
                        propsHttp: {
                            res: 'data'
                        },
                        uploadBefore: (file, done) => {
                            // 文件上传前处理
                            done(file)
                        },
                        uploadAfter: (res, done) => {
                            // this.$message.success('上传成功');
                            done()
                        },
                        uploadError(error, column) {
                            // 上传失败
                            this.$message.error(error);
                        },
                        uploadExceed(limit, files, fileList, column) {
                            // 文件数量验证
                            this.$message.warning(`当前限制文件数量为 $10, 当前共 ${files.length + fileList.length} `);
                        },
                    },
                    {
                        label: '时间 ',
                        prop: 'time',
                        type: 'datetime',
                        labelWidth: 110,
                        format: 'YYYY-MM-DD HH:mm:ss',
                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 时间 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "时间-小时 ",
                        prop: "timeTwo",
                        type: "time",
                        labelWidth: 110,
                        format: 'HH:mm:ss',
                        valueFormat: 'HH:mm:ss',
                        span: 20,
                        pickerOptions: {
                            start: '06:00',
                            step: '00:30',
                            end: '23:00'
                        },
                        rules: [{
                            required: false,
                            message: "请输入 时间-小时  ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '更多信息-text ',
                        prop: 'text',
                        type: 'textarea',
                        labelWidth: 110,
                        maxlength: 128,
                        showWordLimit: true,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请输入 更多信息-text ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '更多信息-fwb ',
                        prop: 'textTwo',
                        labelWidth: 110,
                        maxlength: 0,
                        showWordLimit: true,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请输入 更多信息-fwb ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '更多信息-md ',
                        prop: 'textThree',
                        labelWidth: 110,
                        maxlength: 0,
                        showWordLimit: true,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请输入 更多信息-md ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '级联选择器  ',
                        prop: 'cascader',
                        type: "cascader",
                        labelWidth: 110,
                        dataType: 'string',
                        filterable: true,
                        // 自行替换字典数据
                        dicData: this.defaultdata.dicData,
                        span: 20,
                        props: {
                            value: "id",
                            label: "name",
                            children: "children"
                        },
                        rules: [{
                            required: false,
                            message: "请选择 级联选择器   ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '数组框 ',
                        prop: 'array',
                        type: 'array',
                        labelWidth: 110,
                        dataType: 'string',
                        limit: 10,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请添加 数组框 ",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '图标 ',
                        prop: 'icon',
                        type: 'icon',
                        labelWidth: 110,
                        iconList: this.defaultdata.iconList,
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 图标 ",
                            trigger: "blur"
                        }],
                    },
                    {
                        label: '颜色选择器',
                        prop: 'color',
                        type: 'color',
                        labelWidth: 110,
                        colorFormat: "hex",
                        showAlpha: false,
                        predefine: ["#FF8C00", "#FFD700", "#90EE90", "#00CED1", "#1E90FF",
                            "#C71585", "#FF4500", "#FF7800", "#FAD400", "#00BABD"],
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 颜色选择器 ",
                            trigger: "blur"
                        }],
                    },
                    {
                        // 需先配置高德js 详见: https://avuejs.com/form/form-input-map/#
                        // 新增可给定默认地址: 104.06601585298779,30.656922000443107,四川省成都市青羊区西御河街道天府广场今站购物中心
                        label: '地址选择器',
                        prop: 'map',
                        labelWidth: 110,
                        type: 'map',
                        dataType: 'string',
                        span: 20,
                        rules: [{
                            required: false,
                            message: "请选择 地址选择器 ",
                            trigger: "blur"
                        }],
                    },
                ]
            }
        }
    },
    created() {
        this.obj = this.defaultData;
        this.initSuccess = true;
    },
    methods: {
        emptytChange() {
            this.$emit('closeDialog', false);
        },
        submit(form, done) {
            this.crud.post(this.uri.info, this.obj).then((res) => {
                if (res.data.code == 200) {
                    this.$emit('closeDialog', true);
                }
                done(form);
            }).catch((err) => {
                console.error(err);
                done(form);
            })
        },
    }
}
</script>
